  /* 需要不停修改 */
  body{
    background-color: rgb(245, 250, 250);
  }
  @font-face {
    font-family: 'MyLovelyFont';/*此处是命名字体*/
   src: url('./素材集市康康体3.0_猫啃网/素材集市康康体3.0/素材集市康康体3.0.ttf')format('woff2'),/*有效改变字体*/
   /*src:url('./素材集市康康体3.0_猫啃网/素材集市康康体3.0/素材集市康康体3.0.ttf')format('woff');/*有效改变字体，两者只能选其一*/
}
/* 导航 ：分为logo和菜单*/
.header{
    background: #c926265a 45%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 10% ;
}
/* logo */
.logo{
     font-family: 'MyLovelyFont';
      font-size: 35px;
      font-weight: normal;
        
}
/* 菜单 */
.nav a{ 
color: #555555;
text-decoration: none;
margin-left: 81px;
font-size: 15px;
}
/* 菜单（本质上是链接，因为要跳转）的悬浮效果 */
.nav a:hover{

    color:#000;
    font-weight: 600;
}
/* 父级和子级 */
.nav .active{
     color:#000;
    font-weight: 600;
}
/* 页脚 */
.footer p{
    color: #f29191;
text-align: center;
margin-top: 10px;
font-size: 15px;
}






/* 自我介绍 */
.displayer{
width:1280px;
background-color: #cf1919;
background: rgba(94, 185, 38, 0.3);/*三个255表示白色，最后的0.3表示不透明度30%*/
/* margin-top: 95px;盒子离顶部的像素值 */
margin: 20px auto 0 auto; /*复合属性：上距离95px,右距离自动，下...，左...*/
padding: 45px 39px;
border-radius: 10px;
}
/* 自我介绍里的个人信息 */
.displayer-title{
     font-family: 'MyLovelyFont';
      font-size: 24px;
      font-weight: 400;
        margin-bottom: 20px;
}

.info-box{
/* 左右两端对齐需要flex */
display: flex;
/* 中间留空格 */
justify-content:space-between;
}

/* 个人信息里的文本内容 */
/* 该内容包含在.display里，是父级下的子级，只有父级设计好了，才能设计子级？ */
.info-text p{
margin-bottom: 10px;
line-height: 1.8;
}
/* 个人信息里的图片内容 */
/* 这里出过错：少写了img，这里涉及的是父级和子级，只有con-image有了才能有img */
.info-image img{
width: 355px;
height:169px;
margin-left: 51px;

}

/* 个人爱好 */
/* 将简介与爱好隔开一点：相隔30px */
.hobby{
    margin-top: 30px;
}
/* 用span来设置小块的爱好在一行 */
.hobby-box span{
    /* 行内元素本不可以设计，我们既要设计又要让它在一行就转换为行内块元素 */
    display:inline-block;
    width: 120px;
    height:50px;
    /* background-color: bisque; */
background: #EBC675CC;
    border-radius: 10px;
    margin-right: 30px;
    line-height: 50px;/*设置行高可以使文字上下方位:居中*/
    text-align: center;
    color: aliceblue;
}
/* 配色,子级的span太多了,就用子级选择器来设计颜色 */
.hobby-box span:nth-child(2){
    background: #47B9DDCC;
}
.hobby-box span:nth-child(3){
    background: #DF4545CC;
}
.hobby-box span:nth-child(4){
    background: #F14391CC;
}
.hobby-box span:nth-child(5){
    background: #286AE7CC;
}

/* 联系我 */
label{
    display:flex;
    align-items:flex-start;
    margin-bottom: 30px;/* 让输入框之间有间隔 */
}
label span{
width:100px;
text-align: right;/* 文字向右对齐 */
color: #0e0d0d;
margin-right: 20px;/* 让左边的提示词与右边的文本框之间有距离*/
}
label input{
    outline: none;
    width: 500px;
    height:40px;
    border-radius: 10px;
     border:1px solid #ccc;
    padding-left: 10px;
}
label textarea{
outline: none;
     width: 490px;
    height:200px;
    border-radius: 10px;
     border:1px solid #ccc;
    padding-left: 10px;
}
/* 提交和重置按钮 */
label button{
    cursor: pointer;/*接触就变触手*/
    width:100px;
    height:38px;
    color: #fff;
    background: #286AE7CC;
    border:none;
    margin-right: 40px;
    border-radius: 10px;
}
label .sad{
    background-color:#F14391CC;
}

/* 我的奇形怪状的设计 */
/* 首先是单选与多选 */
.lab-title{
    margin-bottom: 3px;
    font-family: 'MyLovelyFont';
      font-size: 20px;
      font-weight: 300;
}
.duo {
    height:40px;  
}
.dan{
    height:40px;
}
.search-container {
  margin: 20px 0;
}

